/**
* @file 阶段组件
* @author wangcf
* @date 2017-01-07
*/
<template>
  <div class="stage_li">
    <p class="title" v-text="title"></p>
    <span class="bu_stage" @tap="stage()">详情<span class="mui-icon crm-navigate-right"></span></span>
    <div class="mui-scroll-wrapper mui-segmented-control" style="height: 72px;">
      <div class="mui-scroll" style="height: 50px;">
        <a v-for="lis in data.stageList">
          <div class="date"
               :class="{'present': data.isClosed=='0'&&lis.stageId==data.status,'close': (data.closeReason=='1'||data.closeReason=='2')&&lis.stageId==data.status}">
            {{dateMonth(lis.startedOn)}}
          </div>
          <div class="icon">
            <span class="left line" :class="{'l_grey': !lis.startedOn}" v-if="$index!=0"></span>
            <span class="point mui-icon"
                  :class="{'close': (data.closeReason=='1'||data.closeReason=='2')&&lis.stageId==data.status, 'finish': lis.finishedOn!='','p_grey': lis.sid >data.stageId, 'present': lis.sid==data.stageId && lis.finishedOn==''}"><span></span></span>
            <span class="right line"
                  :class="{'l_grey': lis.stageId==data.status||!lis.startedOn}"
                  v-if="$index!=(data.stageList.length-1)"></span>
          </div>
          <div class="name"
               :class="{grey: !lis.startedOn, 'present': data.isColsed=='0'&&lis.stageId==data.status,'close': (data.closeReason=='1'||data.closeReason=='2')&&lis.stageId==data.status}">
            {{lis.sname}}
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
<style lang="less" rel="stylesheet/less">
  @import 'detailPhase.css';
</style>
<script>
  var nativeApi = require('nativeApi');
  export default{
    props: {
      data: {},
      title: ''
    },
    methods: {
      stage: function () {
        this.$dispatch('stage');
      },
      dateMonth: function (val) {
        if (!val) {
          return '';
        }
        var returnVal = '';
        try {
          var valDate = val.substring(0, 10) || '';
          var arrDate = valDate.split('-');
          returnVal = arrDate[1] + '月' + arrDate[2] + '日';
        } catch (e) {
          return '';
        }
        return returnVal;
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
    }
  }
</script>
